<script setup>
import {ArrowLeft} from "@element-plus/icons-vue";
import router from "@/router/index.js";
import {ref} from "vue";

const name = ref("测试名字");
const circleUrl = ref("https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png");

const loginOut = () => {
  // router.push("/login");
  window.location.href = '/login';
}

</script>

<template>
  <div id="app-container">
    <div>
      <el-page-header id="header" :icon="ArrowLeft" @click="router.back()">
        <template #title>
          <span>后退</span>
        </template>
      </el-page-header>
    </div>

    <div class="user-info">
      <el-avatar :size="35" :src="circleUrl" shape="square" style="margin-right: 5px"/>
      <span>欢迎你，</span>
      <span class="user-info-name">{{ name }}</span>
      <span>！</span>
      <el-divider direction="vertical"/>
      <el-button size="small" type="text" @click="loginOut">退出登录</el-button>
    </div>

  </div>
</template>

<style scoped>
#header {
  padding-top: 15px;
}

#app-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.user-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.user-info > span {
  font-size: small;
}

.user-info-name {
  color: #1ca2ff;
  font-weight: bolder;
}

</style>